<template>
  <div>
    <editor id="tinymce" v-model="myValue" :init="init"></editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import {getToken} from "@/utils/auth";

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  mounted() {
    tinymce.init({})
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  data() {
    return {
      init: {
        // language_url: '/tinymce/langs/zh_CN.js',//语言包的路径  本地
        language_url: '/end/tinymce/langs/zh_CN.js',//语言包的路径  线上
        language: 'zh_CN',//语言
        // skin_url: '/tinymce/skins/lightgray',//skin路径  本地
        skin_url: '/end/tinymce/skins/lightgray',//skin路径  线上
        height: 800,//编辑器高度
        branding: false,//是否禁用“Powered by TinyMCE”
        menubar: false,//顶部菜单栏显示
        plugins: 'link lists image table colorpicker textcolor contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | link image | removeformat',
        convert_urls: false,
        font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        images_upload_handler: function (blobInfo, succFun, failFun) {
          var xhr, formData;
          var file = blobInfo.blob();//转化为易于理解的file对象
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open('POST', process.env.VUE_APP_BASE_API + "/common/upload");
          xhr.setRequestHeader(
            'Authorization', "Bearer " + getToken()
          );
          xhr.onload = function () {
            var json;
            if (xhr.status != 200) {
              failFun('HTTP Error: ' + xhr.status);
              return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.url != 'string') {
              failFun('Invalid JSON: ' + xhr.responseText);
              return;
            }
            succFun(json.url);
          };
          formData = new FormData();
          formData.append('file', file, file.name);//此处与源文档不一样
          xhr.send(formData);
        },
        file_picker_types: 'file image media',
        file_picker_callback: function (callback, value, meta) {
          //文件分类
          var filetype =
            '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .wps, .dps, .exe';
          //后端接收上传文件的地址
          var upurl = process.env.VUE_APP_BASE_API + "/common/upload";
          //为不同插件指定文件类型及后端地址
          switch (meta.filetype) {
            case 'image':
              filetype = '.jpg, .jpeg, .png, .gif';
              break;
            case 'media':
              filetype = '.mp3, .mp4';
              break;
            case 'file':
            default:
          }
          //模拟出一个input用于添加本地文件
          var input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', filetype);
          input.click();
          input.onchange = function () {
            var file = this.files[0];

            var xhr, formData;
            console.log(file.name);
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', upurl);
            xhr.setRequestHeader(
              'Authorization', "Bearer " + getToken()
            );
            xhr.onload = function () {
              var json;
              if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
              }
              json = JSON.parse(xhr.responseText);
              if (!json || typeof json.url != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
              }
              callback(json.url);
            };
            formData = new FormData();
            formData.append('file', file, file.name);
            xhr.send(formData);
          };
        }
      },
      myValue: this.value
    }
  }
}
</script>
<style scoped lang="scss">

</style>
